<!--本文件由FirstUI授权予关赛川（手机号： 1 5  60  05 1  520 5，身份证尾号：22 6  5 1 9）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="guestInfor">
		<fui-radio-group name="radio" v-model="checkval"   @change='checkq'>
			<view class="fui-list__item " v-for="(item,index) in guestList" :key='index'>
				<fui-label>
					<view class="fui-align__center " @click='checkChange(item)' >
						<view class="fui-text">
							<!-- <fui-radio :value="item.id"></fui-radio> -->
							<image v-if="!item.isChecked" :src="baseOssUrl +'icon/radio-img.png' " mode="" class='check-img'></image>
							<image v-else :src="baseOssUrl +'icon/isradio-img.png' " mode="" class='check-img'></image>
							<view class="peplo-info">
								<view class="">
									{{item.name}}
								</view>
								<view class="id-cards">
									<text>{{arr[item.type]}}</text>
									<text class="id-number">{{item.number}}</text>
								</view>
							</view>
						</view>
						<view class="btn-img">
							<image :src="baseOssUrl + 'icon/bji.png' " class="updataBtn" mode="" @click.stop="goModify(item)"></image>
							<image :src="baseOssUrl+ 'icon/detet-img.png' " class="deletBtn" @click.stop="goDelete(item.id)" mode=""></image>
						</view>
					</view>
				</fui-label>
			</view>
			<fui-divider v-if="bottomShowText" text="没有更多了"></fui-divider>
		</fui-radio-group>
		<view class="fixedBtn">
			<fui-button text="添加入住人信息" background="#35743D" radius='50rpx' class="addButn" width="95%" @click='goaddCheck'
			 height="72rpx" size='28'></fui-button>
		</view>
		<fui-toast ref="toast">
			<view class="fui-toast__custom">
				<fui-icon name="checkbox" color="#fff"></fui-icon>
				<text class="fui-toast__txt">删除成功</text>
			</view>
		</fui-toast> 
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl
	} from '@/common/settings';
	export default {
		computed: mapState(['userId']),
		data() {
			return {
				baseOssUrl: baseOssUrl,
				checkval: '',
				guestList: [],
				page: 1,
				limit: 10,
				dataPages:0,
				typeName: '',
				arr :{1:"身份证",2:"护照",3:"军官证"},
				total:0,
				bottomShowText:false
			}
		},
		onLoad(op) {
			// this.userId = op.userId
		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			console.log("触底11",this.page,this.dataPages)
			if (this.page >= this.dataPages ) {
				console.log("触底",this.page,this.dataPages)
				this.fui.toast("到底了")
				this.bottomShowText =true
				return false
			}else{
				this.page ++
				this.getList() 
			}
		},
		onPullDownRefresh() {
			console.log('开始');
			this.page = 1
			this.guestList =[]
			this.getList()
			setTimeout(function() {
				console.info('请求结束')
				uni.stopPullDownRefresh();
			}, 1000);
		
		},
		methods: {
			// 删除 
			goDelete(id) {
				this.$http.post(this.$httpApi.occupantUpdata, {
					data: {
						id: id,
						deleteFlag: 1,
					}
				}).then(res => {
					if (res.code == 0) {
						this.$refs.toast.show({})
						this.getList()
					}
				})
			},
			//获取列表
			getList() {
				this.$http.get(this.$httpApi.occupantList, {
					data: {
						page: this.page,
						limit: this.limit,
						userId: this.userId
					}
				}).then(res => {
					if (res.code == 0) {
						res.page.forEach(val=>{
							this.$set(val,'isChecked', false)
						})
						if(res.pages==1){
							this.guestList = res.page;
						}else if(res.pages == 0){
							this.guestList = []
						}else{
							this.guestList = this.guestList.concat(res.page)
						}
						console.log("res",res.pages)
						this.total = res.total
						this.dataPages = res.pages
						console.log("guestList",this.guestList)
					}
				})
			},
			// 
			goModify(val) {
				uni.navigateTo({
					url: "/pages/guestInfoAdd/index?data=" + JSON.stringify(val)
				})
			},
			goaddCheck() {
				uni.navigateTo({
					url: "/pages/guestInfoAdd/index"
				})
			},
			checkChange(item){
				item.isChecked = true
				console.log("item",item)
				let timer = setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
					 
				}, 300)
				 
				uni.setStorageSync('yuyueName',item.name)
				
			},
			checkq(){
				console.log("dianjil")
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.guestInfor {
		height: 100%;
		width: 100%;
		padding-bottom: 200rpx;


		.fui-list__item {
			/deep/.fui-radio__color {
				background: #35743D !important;
				border-color: #35743D !important;
			}

			.fui-align__center {
				color: #1D1D1D;
				font-size: 30rpx;
				margin: 24rpx;
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 24rpx;
				border-radius: 8rpx;

				.fui-text {
					display: flex;
					align-items: center;
					.check-img{
						width: 30rpx;
						height: 30rpx;
					}
					.peplo-info {
						margin-left: 20rpx;
						color: #1D1D1D;
						font-size: 30rpx;
						font-weight: bold;
					}

					.id-cards {
						color: #707070;
						font-size: 28rpx;
						font-weight: 400;
						margin-top: 10rpx;
						.id-number{
							margin-left: 20rpx;
						}
					}
				}

				.btn-img {
					.updataBtn {
						width: 35rpx;
						height: 33rpx;
						margin-right: 30rpx;
					}

					.deletBtn {
						width: 34rpx;
						height: 34rpx;
					}
				}
			}

			image {
				width: 35rpx;
				height: 33rpx;
			}


		}

		// 新增入住人信息
		.fixedBtn {
			position: fixed;
			bottom: 90rpx;
			width: 100%;

			.addButn {
				display: flex;
				justify-content: center;

			}
		}
	}

	.fui-toast__custom {
		display: flex;
		align-items: center;

		.fui-toast__txt {
			margin-left: 5rpx;
			color: #FFFFFF;
		}
	}
</style>
